{% extends '../temp_base.html' %}

{% block local_header_css_js %}
  <!-- DataTables -->
  <link rel="stylesheet" href="{{HTML_URL_BASE}}/plugins/datatables/dataTables.bootstrap.css">

{% end %}

{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Permission List
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Permission Management</a></li>
        <li class="active">Permission List</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- add content for group -->
        <div class="col-md-12">
          <!-- Horizontal Form -->
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title"><b>Permission List Detail:</b></h3>
            </div>
            <!-- /.box-header -->
            <!-- form start group -->
            <form class="form-horizontal" action="../saveobject" method="post">
              <div class="box-body">
                <table id="tb_perm_list" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>NO</th>
                  <th>Actor Type</th>
                  <th>Actor</th>
                  <th>Resource Type</th>
                  <th>Resource</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% for index, m in enumerate(map_list, start=1) %}
                <tr>
                  <td>{{index}}</td>
                  <td>{{m['actor_type']}}</td>
                  <td>{{m['actor'].name}}</td>
                  <td>{{m['res_type']}}</td>
                  <td>{{m['res'].name}}</td>
                  <td>
                    <button id="btn_host_update" type="button" class="btn btn-primary btn-xs" value="permdel?id={{m['id']}}">Delete</button>
                  </td>
                </tr>
                {% end %}
              </table>
              </div>
              <!-- /.box-body -->
              <!-- /.box-footer -->
            </form>
          </div>
          <!-- /.box -->
        </div>
        <!--/.add content for group-->        
      </div>
      <!-- /.row -->
      
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{% end %}

{% block local_footer_css_js %}
<!-- DataTables -->
<script src="{{HTML_URL_BASE}}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="{{HTML_URL_BASE}}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="{{HTML_URL_BASE}}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="{{HTML_URL_BASE}}/plugins/fastclick/fastclick.js"></script>
<!-- multiselect -->
<script src="{{HTML_URL_BASE}}/others/js/multiselect.min.js"></script>
<script src="{{HTML_URL_BASE}}/others/js/prettify.min.js"></script>
<!-- page script -->
<script>
  $(function () {
    $('#tb_perm_list').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
    
    $("#btn_create_user").click(function(){
        window.location.href='addgroup';
    });
    
    $('#mulsel_sel_groups').multiselect();
    $('#mulsel_sel_users').multiselect();
    
  });
</script>
{% end %}
